<template>
  <div class="login-container">
    <el-form :model="formData" :rules="rulesList"
             status-icon
             ref="formData"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">用户登录</h3>
      <div class="photo" >

        <div>
          <el-image
              style="width: 150px; height: 150px"
              :src="wx"
              fit="fill"></el-image>
          <p>微信公众号</p>
        </div>
        <div>
          <el-image
              style="width: 150px; height: 150px"
              :src="qqGroup"
              fit="fill"></el-image>
          <p>QQ群</p>
        </div>
      </div>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="formData.username"
                  auto-complete="off"
                  placeholder="用户登录名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="formData.password"
                  auto-complete="off"
                  placeholder="密码"
        ></el-input>
      </el-form-item>
      <!--      <el-checkbox
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>-->
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" :loading="logining" @click="handleSubmit">登录</el-button>
      </el-form-item>

      <router-link tag="div" :to="{ path: 'register' }">
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" :loading="logining">注册</el-button>
        </el-form-item>
      </router-link>
    </el-form>
  </div>
</template>

<script>


export default {
  data() {
    return {
      qqGroup: require("../assets/qqGroup.png"),
      wx: require("../assets/wx.jpg"),
      logining: false,
      formData: {
        username: 'admin',
        password: 'admin',
      },
      rulesList: {
        username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
        password: [{required: true, message: 'enter your password', trigger: 'blur'}]
      },
      checked: false
    }
  },
  methods: {
    handleSubmit() {

      this.$axios.get('/user/login', {
        params: {
          username: this.formData.username,
          password: this.formData.password
        }
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '登录成功，正在跳转',
            type: 'success'
          });
          let userInfo = res.data
          localStorage.setItem("userInfo", JSON.stringify(userInfo))
          localStorage.setItem("token", userInfo.token)
          setTimeout(() => {
            this.$router.push({path: 'article'});
          }, 3000)

        }

      })

    }
  }
};
</script>

<style scoped>
.photo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.login-container {
  width: 100%;
  height: 100%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}

.title {
  text-align: center;
  margin-bottom: 35px;
}
</style>